<template>
	<view class="detail-container">
		<u-sticky offset-top="0">
			<view class="state-box" @click="handleOpenPopup">
				<text class="state-title">开票状态</text>
				<view class="detail-box">
					<text class="detail-box" :style="{'color': stateColor}">{{invoiceStatus}}</text>
					<image class="notice-right-image" :src="getImgUrl('/applet_assets/safe_closed/right.png')" lazy-load="true" mode="scaleToFill" />
				</view>
			</view>
		</u-sticky>

		<view class="bill-info-detail">
			<view class="bill-title">
				<text class="text">发票信息</text>
				<text class="text">（1条）</text>
			</view>
			<block v-if="list.length > 0">
				<view class="bill-list-box" v-for="(item, i) in list" :key="i">
					<view class="bill-row">
						<view class="public-li">
							<text class="title">发票类型</text>
							<text class="content">{{item.receipt_name}}</text>
						</view>
						<view class="public-li">
							<text class="title">开票内容</text>
							<text class="content">{{item.charge_item_name}}</text>
						</view>
						<view class="public-li">
							<text class="title">发票抬头</text>
							<text class="content">{{item.payer_company_name}}</text>
						</view>
						<view class="public-li">
							<text class="title">纳税人识别号</text>
							<text class="content">{{item.payee_credit_code}}</text>
						</view>
						<view class="public-li">
							<text class="title">开票金额</text>
							<text class="content">{{item.amount}}元</text>
						</view>
						<view class="public-li">
							<text class="title">申请时间</text>
							<text class="content">{{item.created_at}}</text>
						</view>
						<view class="public-li">
							<text class="title">开票时间</text>
							<text class="content">{{item.open_time}}</text>
						</view>
						<view v-if="item.url" class="view-bill"> 查看发票 </view>
					</view>
					<!-- 退票原因 -->
					<view class="refund-reson" v-if="item.refund_type">
						<view class="public-li">
							<text class="title">退票原因</text>
							<text class="content">{{item.refund_type_name}}</text>
						</view>
						<view class="public-li">
							<text class="title">操作时间</text>
							<text class="content">{{item.refund_at}}</text>
						</view>
						<view class="public-li">
							<text class="title">备注</text>
							<text class="content">{{item.refund_remark}}</text>
						</view>
					</view>
				</view>
			</block>
			<view v-else class="bill-list-box">
				<view class="bill-row">
					<view class="public-li">
						<text class="title">发票类型</text>
						<text class="content">{{detailInfo.receipt_name}}</text>
					</view>
					<view class="public-li">
						<text class="title">开票内容</text>
						<text class="content">{{detailInfo.bill_text}}</text>
					</view>
					<view class="public-li">
						<text class="title">发票抬头</text>
						<text class="content">{{detailInfo.name}}</text>
					</view>
					<view class="public-li">
						<text class="title">纳税人识别号</text>
						<text class="content">{{detailInfo.credit_code}}</text>
					</view>
					<view class="public-li">
						<text class="title">开票金额</text>
						<text class="content">{{detailInfo.receipt_amount}}元</text>
					</view>
					<view class="public-li">
						<text class="title">申请时间</text>
						<text class="content">{{detailInfo.created_at}}</text>
					</view>
					<view class="public-li">
						<text class="title">开票时间</text>
						<text class="content" style="display: flex; flex-wrap: wrap;">{{detailInfo.open_time}}</text>
					</view>
				</view>
			</view>
		</view>
		<view v-if="detailInfo.cancel_type" class="bill-info-detail">
			<view class="bill-title">
				<text class="text">取消开票</text>
				<text></text>
			</view>
			<view class="bill-list-box">
				<view class="bill-row">
					<view class="public-li">
						<text class="title">退票原因</text>
						<text class="content">{{detailInfo.cancel_type_name}}</text>
					</view>
					<view class="public-li">
						<text class="title">操作时间</text>
						<text class="content">{{detailInfo.cancel_at}}</text>
					</view>
					<view class="public-li">
						<text class="title">备注</text>
						<text class="content" style="display: flex; flex-wrap: wrap;">{{detailInfo.cancel_remark}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="stepsShow" :round="20">
			<view-steps :steps="steps" activeColor="#00B42A" />
		</u-popup>
		<view v-if="detailInfo.cancel_type" class="footer-fixed-container">
			<view class="cancel-btn public-btn" @click="handdleCancelInvoice">取消开票</view>
			<view class="reset-btn public-btn">重开发票</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ASSETS_HOST} from '@/config';
	import {ref, reactive, watch, computed} from 'vue';
	import { onPageScroll, onLoad, onReachBottom } from '@dcloudio/uni-app';
	import {invoiceDetail, cancelIinvoice} from '@/api_request/invoiceList';
	import viewSteps from '@/components/view-steps/view-steps'
	
	const detailId = ref<string | number>('')
	const detailInfo = ref({})
	const stateColor:string = ref('#165DFF')
	const list = ref<[]>([])
	const stepsShow = ref(false)
	const steps = ref([])
	
	onLoad((option) => {
		detailId.value = option.id
		getInvoiceDetail()
	})
	const invoiceStatus = computed(() => {
		let state = ''
		if(detailInfo.value.status == 1) {
			state = '提交申请'
			stateColor.value = '#165DFF'
		}else if(detailInfo.value.status == 2) {
			state = '开票完成'
			stateColor.value = '#00B42A'
		}else if( detailInfo.value.status == 3) {
			state = '已红冲'
			stateColor.value = '#F5222D'
		}else if(detailInfo.value.status == 4) {
			state = '已退款'
			stateColor.value = '#F5222D'
		}
		return state
	})
	const getInvoiceDetail = async ()=> {
		const {data, code, message} = await invoiceDetail({id: detailId.value})
		if(code == 200) {
			const params = {
				'1': '增值税普通发票（电子）',
				'2': '增值税普通发票（纸质）',
				'3': '增值税专用发票（电子）',
				'4': '增值税专用发票（纸质）'
			}
			const cancelType = {
				'1': '发票信息错误',
				'2': '发票类型错误',
				'3': '退款'
			}
			detailInfo.value = data
			detailInfo.value.cancel_type_name = data.cancel_type ? cancelType[data.cancel_type] : data.cancel_type
			if(data.status == 1) {
				detailInfo.value.receipt_name = params[data.receipt_type]
			}else {
				list.value = data.receipt_info.map(item => {
					return {
						...item,
						receipt_name: params[item.receipt_type],
						refund_type_name: cancelType[item.refund_type]
					}
				})
			}
		}else {
			uni.$showMsg(message)
		}
	}
	
	const handleStepsClose = ()=> {
		stepsShow.value = false
	}
	
	const handleStepsOpen = ()=> {
		stepsShow.value = true
	}
	
	const handleOpenPopup = () => {
		stepsShow.value = true
	}
	// 取消开票
	const handdleCancelInvoice = async ()=> {
		const params = {
			id: 1,
			cancel_type:'', // 1、发票信息错误 2、发票类型错误 3、退款
			cancel_remark: ''
		}
		const {data, code, message} = await cancelIinvoice(params)
		if(code == 200) {
			
		}else {
			uni.showMsg(message)
		}
	}
	// 重新开票
	const handleResetInvoice =()=> {
		
	}
	
	const getImgUrl = (url:string) => {
		return ASSETS_HOST + url
	}
</script>

<style lang="scss" scoped>
.detail-container {
	padding: 0 20rpx;
	box-sizing: border-box;
	background: #F6F8FC;
	min-height: 100%;
	
	.state-box {
		width: 100%;
		padding: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 10rpx;
		
		.state-title {
			font-size: 28rpx;
			color: #8091A4;
		}
		
		.detail-box {
			display: flex;
			align-items: center;
			
			.detail-box {
				font-size: 28rpx;
				font-weight: 500;
				color: #FF7D00;
				margin-right: 10rpx;
			}
			
			.notice-right-image {
				width: 12rpx;
				height: 24rpx;
			}
			
		}
	}
	
	.bill-info-detail {
		margin-top: 40rpx;
		
		.bill-title {
			margin-bottom: 4rpx;
			.text {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 32rpx;
				&:last-child {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #8091A4;
				}
			}
		}
		
		.bill-list-box {
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx 28rpx 40rpx 40rpx;
			box-sizing: border-box;
			
			.public-li {
				display: flex;
				align-items: center;
				margin-bottom: 34rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.title {
					font-size: 28rpx;
					color: #8091A4;
					width: 168rpx;
					margin-right: 54rpx;
				}
				
				.content {
					font-size: 28rpx;
					color: #333333;
				}
			}
			
			.view-bill {
				margin-top: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #F7A04A;
				height: 80rpx;
				background: #FFF4E8;
				border-radius: 12rpx;
			}
		}
		.refund-reson {
			margin-top: 40rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			border-top: 1px dashed #F4F4F4;
			
			.public-li {
				display: flex;
				align-items: center;
				margin-bottom: 34rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.title {
					font-size: 28rpx;
					color: #8091A4;
					width: 168rpx;
					margin-right: 54rpx;
				}
				
				.content {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
	
	.footer-fixed-container {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
		background-color: #FFFFFF;
		padding: 16rpx 40rpx;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		
		.public-btn {
			width: 310rpx;
			height: 92rpx;
			border-radius: 100rpx;
			opacity: 1;
			border: 2rpx solid;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			margin-right: 50rpx;
			&:last-child {
				margin-right: 0;
			}
		}
		
		.cancel-btn {
			border-color: #EA0000;
			color: #EA0000;
		}
		
		.reset-btn {
			background: #4A76F7;
			border-color:  #4A76F7;
			color: #FFFFFF;
		}
	}
	
	::v-deep .u-popup {
		.u-slide-up-enter-to .u-popup__content{
			.content-box {
				padding: 40rpx;
				box-sizing: border-box;
				
				.header-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.title {
						font-size: 36rpx;
						color: #333333;
					}
					
					.confirm-btn {
						font-size: 28rpx;
						color: #165DFF;
					}
				}
				
				.steps-container {
					margin-top: 40rpx;
				}
			}
		}
	}
	
}	
</style>